<template>
  <div class="block">
    <Title title="设备信息" introduce="监控所有设备状态" />
    <div class="msg-block">
      <Homedata></Homedata>
      <template v-for="(value, keys) in list">
        <div v-if="value.length !== 0" :key="keys" class="first-block">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="title-text">{{ keys }}</span>
            </div>
            <div class="msg-content">
              <el-card
                class="box-card msg-list"
                v-for="item in value"
                :key="item.bTime"
              >
                <div class="msg-icon">
                  <i
                    class="iconfont icon-yalichuanganqi"
                    :style="{ color: item.online ? '#3DD93D' : '#808080' }"
                  ></i>
                </div>
                <div style="font-size: 18px; font-weight: bold">
                  {{ item.devValue }}
                </div>
                <div style="font-size: 14px">{{ item.devName }}</div>
                <div class="botttom">EUI:{{ item.eui }}</div>
              </el-card>
            </div>
          </el-card>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import Homedata from "@/components/dashboard/Homedata.vue";
import { $sensorList } from "@/api/index.js";

export default {
  name: "dashboarddata",
  components: {
    Title,
    Homedata,
  },
  data() {
    return {
      list: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      $sensorList().then((res) => {
        this.list = res.data.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.block {
  width: 100%;
}

.title-text {
  font-size: 14px;
  color: black;
  font-weight: bold;
}

.msg-block {
  width: 100%;
  .de-left {
    width: 100%;
  }
}

.first-block,
.second-block {
  margin-top: 10px;
  .box-card {
    /deep/ .el-card__body {
      padding: 0;
    }
    .msg-content {
      width: 100%;
      padding: 20px 0 30px 40px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .msg-list {
        width: 180px;
        height: 150px;
        margin: 0 10px 10px 0;
        text-align: center;
        .botttom {
          width: 180px;
          height: 30px;
          background: #f3f4f5;
          line-height: 30px;
          font-size: 14px;
        }
      }
    }
  }
}

.msg-list div {
  margin-top: 10px;
}

.msg-icon {
  transform: rotate(180deg);
  .iconfont {
    font-size: 36px;
  }
}
</style>
